<template>
    <div class="think">
        <search-box class="search-view"/>
        <swiper :options="swiperOptions" :auto="2000" :height="165"/>
        <div class="component-title">
            <div class="title">机构团队</div>
            <div class="join" ><img src="../../assets/icon-add.svg">加入</div>
        </div>
      
        <div class="advertisement">
            <img src="../../assets/advertisement.svg" />
        </div>

        <div class="team-list">
            <div class="team-list-item" v-for="(item, key) in teamList" :key="key" v-on:click="handleItemClick(item.id)">
                <img :src="item.img">
                <span class="title">{{item.name}}</span>
                <span class="number">总: <b>{{item.number}}</b>篇</span>
            </div>
        </div>

        <title-label class="bg-white" title="最新研报"/>

        <ul class="research">
            <li class="research-list" v-for="(item, key) in reportList" :key="key">
                <div>
                    <span>{{item.title}}</span>
                    <span>{{item.tsource}}</span>
                    <span>{{item.updatetime}}</span>
                </div>
                <img src="../../assets/research-list.png" />
            </li>
        </ul>
    </div>
</template>

<style lang="less" scoped>
    @import '../../style/variable';

    .think {
        background-color: #EFEFF4;

        &-swipe {
            img {
                width: 37.5rem;
                height: 16.5rem;
                display: block;
            }
        }

        .component-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            font-size: 2rem;
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid @color-line-gray;
            margin-top: 0.8rem;

            .title {
                color: @app-color;
                font-size: 1.7rem;

                border-left: .2rem solid @app-color;
                padding-left: .8rem;
            }

            .join {
                font-size: 1.5rem;

                img {
                    margin-right: 0.2rem;
                }
            }
        }

        .advertisement {
            width: 100%;
            height: 3.6rem;
            img {
                width: 100%;
                height: 100%;
            }
        }

        .team-list {
            display: flex;
            flex-wrap: wrap;
            background-color: #fff;
            width: 37.5rem;
            margin-bottom: 0.8rem;
            &-item {
                border-right: 1px solid #ddd;
                border-bottom: 1px solid #ddd;
                width: 33.2%;
                height: 12.5rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                img {
                    width: 6rem;
                    height: 6rem;
                    border: 1px solid #ddd;
                }


                span:nth-of-type(1) {
                    font-size: 1.3rem;
                    margin: 0.6rem 0;
                }

                span:nth-of-type(2) {
                    color: #7A7A7A;

                    b {
                        display: inline-block;
                        color: #333E48;
                        margin: 0 0.2rem;
                    }
                }
            }

            &-item:nth-child(3n + 0) {
                border-right: 0;
            }
        }
        
        .research {
            background-color: #fff;
            padding-left: 1rem;
            .research-list {
                display: flex;
                border-bottom: 1px solid #CBCBCB;
                padding: 1.2rem 1.5rem 1.2rem 0;
                
                div {
                    display: flex;
                    flex-direction: column;
                    flex: 3;
                    margin-right: 1.3rem;

                    span:nth-of-type(2) {
                        font-weight: 700;
                        color: #999;
                    }

                    span:nth-of-type(3) {
                        color: #999;
                    }
                }

                img {
                    flex: 1;
                }
            }
        }
    }
</style>

<script>
    import { Tab, Tabs, Swipe, SwipeItem } from 'vant';
    import { think as API } from 'api';
    import T from 'utils/T';
    export default {
        components: {
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem,
        },

        data() {
            return {
                swiperOptions: [
                    {
                        src: 'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
                        to: '/same'
                    },
                    'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
                ],
                teamList: [
                    {
                        id: '1',
                        img: 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                        name: '谢亚轩宏观团队',
                        number: '33',
                    },
                    {
                        id: '2',
                        img: 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                        name: '谢亚轩宏观团队',
                        number: '133'
                    },
                    {
                        id: '3',
                        img: 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                        name: '谢亚轩宏观团队',
                        number: '133'
                    },
                    {
                        id: '4',
                        img: 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                        name: '谢亚轩宏观团队',
                        number: '133'
                    },
                    {
                        id: '5',
                        img: 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                        name: '谢亚轩宏观团队',
                        number: '133'
                    },
                    {
                        id: '6',
                        img: 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                        name: '谢亚轩宏观团队',
                        number: '133'
                    },
                ],
                reportList: []
            }
        },
        created(){
            this.requestReport();
        },
        methods: {
            handleItemClick(id) {
                this.$router.push('/think/teamDetail?id=' + id);
            },
            requestReport(){
                this.$axios.get(API.THINK_ORG_REPORT).then((result)=>{
                    let resultData = result.data.list;
                    this.reportList = resultData.map(item => {
                        return {
                            id: item.id,
                            title: item.title,
                            tsource: item.tsource,
                            updatetime: T.formatDate(item.updatetime, 2)

                        }
                    });
                    console.log('this.reportList', this.reportList);
                })
            },
        }
    }
</script>
